<div class="example-container">
  <h4>Basic Inputs</h4>
  <div>
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Favorite food" value="Sushi">
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <textarea matInput placeholder="Leave a comment"></textarea>
      </mat-form-field>
    </form>
  </div>
</div>
<div class="example-container">
  <h4>Input with a custom ErrorStateMatcher</h4>
  <div>
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Email" [formControl]="emailFormControl" [errorStateMatcher]="matcher">
        <mat-hint>Errors appear instantly!</mat-hint>
        <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
          Please enter a valid email address
        </mat-error>
        <mat-error *ngIf="emailFormControl.hasError('required')">
          Email is
          <strong>required</strong>
        </mat-error>
      </mat-form-field>
    </form>
  </div>
</div>
<div class="example-container">
  <h4>Input with a clear button</h4>
  <div>
    <mat-form-field class="example-form-field">
      <input matInput type="text" placeholder="Clearable input" [(ngModel)]="valueClear" />
      <button mat-button *ngIf="valueClear" matSuffix mat-icon-button aria-label="Clear" (click)="valueClear=''">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>
  </div>
</div>
<div class="example-container">
  <h4>Input with error messages</h4>
  <div>
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Email" [formControl]="emailFormControl1">
        <mat-error *ngIf="emailFormControl1.hasError('email') && !emailFormControl1.hasError('required')">
          Please enter a valid email address
        </mat-error>
        <mat-error *ngIf="emailFormControl1.hasError('required')">
          Email is
          <strong>required</strong>
        </mat-error>
      </mat-form-field>
    </form>
  </div>
</div>
<div class="example-container">
  <h4>Inputs in a form</h4>
  <div>
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Company (disabled)" disabled value="Google">
      </mat-form-field>

      <table class="example-full-width" cellspacing="0">
        <tr>
          <td>
            <mat-form-field class="example-full-width">
              <input matInput placeholder="First name">
            </mat-form-field>
          </td>
          <td>
            <mat-form-field class="example-full-width">
              <input matInput placeholder="Long Last Name That Will Be Truncated">
            </mat-form-field>
          </td>
        </tr>
      </table>

      <p>
        <mat-form-field class="example-full-width">
          <textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
        </mat-form-field>
        <mat-form-field class="example-full-width">
          <textarea matInput placeholder="Address 2"></textarea>
        </mat-form-field>
      </p>

      <table class="example-full-width" cellspacing="0">
        <tr>
          <td>
            <mat-form-field class="example-full-width">
              <input matInput placeholder="City">
            </mat-form-field>
          </td>
          <td>
            <mat-form-field class="example-full-width">
              <input matInput placeholder="State">
            </mat-form-field>
          </td>
          <td>
            <mat-form-field class="example-full-width">
              <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
              <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
            </mat-form-field>
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>
<div class="example-container">
  <h4>Input with hints</h4>
  <div>
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <input matInput #message maxlength="30" placeholder="Message">
        <mat-hint align="start">
          <strong>Don't disclose personal info</strong>
        </mat-hint>
        <mat-hint align="end">{{message.value.length}} / 30</mat-hint>
      </mat-form-field>
    </form>
  </div>
</div>
<div class="example-container">
  <h4>Inputs with prefixes and suffixes</h4>
  <div>
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <span matPrefix>+1 &nbsp;</span>
        <input type="tel" matInput placeholder="Telephone">
        <mat-icon matSuffix>mode_edit</mat-icon>
      </mat-form-field>
    </form>
  </div>
</div>
